{% extends "base.html" %}

{% block content %}
{# 调试用 - 显示第一个预测项的结构 #}
<div style="display:none">
    <pre>{{ predictions[0]|tojson(indent=2) }}</pre>
</div>
<div class="row mb-4">
    <div class="col">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0"><i class="fas fa-chart-bar me-2"></i>空气质量预测可视化</h4>
            </div>
            <div class="card-body">
                <p class="card-text">展示未来7天(168小时)的空气质量预测数据，包括PM2.5、PM10、SO2和O3等污染物浓度。</p>
            </div>
        </div>
    </div>
</div>

<div class="row mb-4">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0"><i class="fas fa-sliders-h me-2"></i>图表控制</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">选择污染物:</label>
                    <select id="pollutant-select" class="form-select" multiple>
                        {% for pollutant in pollutants %}
                        <option value="{{ pollutant }}" selected>{{ pollutant }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">时间范围:</label>
                    <div class="input-group">
                        <input type="number" id="hours-start" class="form-control" placeholder="起始小时" value="1" min="1" max="168">
                        <span class="input-group-text">至</span>
                        <input type="number" id="hours-end" class="form-control" placeholder="结束小时" value="24" min="1" max="168">
                    </div>
                </div>
                <button id="update-chart" class="btn btn-primary w-100">
                    <i class="fas fa-sync-alt me-2"></i>更新图表
                </button>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0"><i class="fas fa-chart-line me-2"></i>污染物浓度趋势</h5>
            </div>
            <div class="card-body">
                <div id="main-chart" style="height: 400px;"></div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col">
        <div class="card">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0"><i class="fas fa-table me-2"></i>预测数据</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="data-table" class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>时间</th>
                                <th>预测小时</th>
                                <th>PM2.5</th>
                                <th>PM10</th>
                                <th>SO2</th>
                                <th>O3</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for pred in predictions %}
                            <tr>
                                <td>{{ pred.timestamp }}</td>
                                <td>{{ pred.hours_ahead }}</td>
                                <td>{{ pred['PM2.5'] }}</td>
                                <td>{{ pred['PM10'] }}</td>
                                <td>{{ pred['SO2'] }}</td>
                                <td>{{ pred['O3'] }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 将预测数据传递给JS
const predictions = JSON.parse('{{ predictions|tojson|safe }}');
</script>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
{% endblock %}